import React, { useEffect, useState } from 'react'
import { Box, AutoRollComponent } from '$components';
import './style.less';

function CitySafty(props) {
    const getContent = () => {
        return <div className='realtime_data'>
            <div className='realtime_item'>
                <div className='_icon1' />
                <div className='_text'>
                    <div className='_row1'>
                        <span>拥堵指数</span>
                        <span>平均时速</span>
                    </div>
                    <div className='_row2'>
                        <span><span className='_number'>1.43</span>畅通</span>
                        <span><span className='_number'>30.5</span>km/h</span>
                    </div>
                </div>
            </div>
            <div className='realtime_item'>
                <div className='_icon2' />
                <div className='_text'>
                    <div className='_row1'>
                        <span>今日接警数</span>
                        <span>今日出警数</span>
                    </div>
                    <div className='_row2' style={{ color: 'rgba(89, 153, 200, 1)' }}>
                        <span><span className='_number'>143</span>个</span>
                        <span><span className='_number'>86</span>个</span>
                    </div>
                </div>
            </div>

            <div className='realtime_item'>
                <div className='_icon3' />
                <div className='_text'>
                    <div className='_row1'>
                        <span>烟感设备</span>
                        <span>设备在线率</span>
                    </div>
                    <div className='_row2' style={{ color: 'rgba(89, 153, 200, 1)' }}>
                        <span><span className='_number'>271</span>个</span>
                        <span><span className='_number'>99.9</span>个</span>
                    </div>
                </div>
            </div>
        </div>
    }
    return <Box title={"城市安全"} >
        <AutoRollComponent repeat={false} canScroll={true} content={getContent()} divHeight={242} divId={`fire-right-top`} />
    </Box>
}

export default CitySafty;


